<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<base href="${path}/pages/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>学生管理系统</title>
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
</head>
<body>
	
<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-form layui-card-header layuiadmin-card-header-auto">
	        <div class="layui-form-item">	         
	          <div class="layui-inline">
	            <label class="layui-form-label" style="width:30px">姓名</label>
	            <div class="layui-input-inline">
	              <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
	            </div>
	          </div>
	          <div class="layui-inline">
	            <label class="layui-form-label" style="width:30px">班级</label>
	            <div class="layui-input-inline">
	              <select name="clazzId" id="clazzId">
			        <option value=""></option>			        
			      </select>
	            </div>
	          </div>	          
	          <div class="layui-inline">
	            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="lay-search">
	              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
	            </button>
	          </div>
	        </div>
	      </div>
	
		<div class="layui-card-body">
			<div class="layui-btn-group" style="margin-bottom:10px">
				<button class="layui-btn layui-btn-normal toolbar" data-type="add"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
				<button class="layui-btn layui-btn-danger toolbar" data-type="batchdel"><i class="layui-icon layui-icon-delete"></i> 删除</button>
			</div>
			
			<table id="lay-table" lay-filter="lay-table"></table>
			
		</div>

	</div>
	
</div>
	
<!-- 自定义模板 -->
<script type="text/html" id="tr-opts">
   	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<script src="../layuiadmin/layui/layui.js"></script>
<script>
layui.config({
	base: '../layuiadmin/' //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
}).use('index');

layui.use(['table', 'form'], function() {
	var table = layui.table;
	var layer = layui.layer;
	var form = layui.form;
	var $ = layui.$;
	
	//表格渲染
	table.render({
	    elem: '#lay-table',
	    height: 'full-180',
	    method: 'post',
	    url: '${path}/action/student/list',		//ajax请求
	   	page: true,
	   	even: true,
	    cols: [[ //表头
	    	{checkbox: true},
	    	{title:'#', type:'numbers', align:'center', width:40},
	      	{field: 'name', title: '姓名', minWidth:130},
	      	{field: 'sno', title: '学号', width:180, sort:true},
	      	{field: 'cname', title: '班级', width:180, sort:true},
	      	{title: '操作', fixed: 'right', width: 160, toolbar: '#tr-opts'}
	    ]],
	    limits: [15, 30, 50, 100, 200], 
		limit: 15,
		loading: true,
		autoSort: false
	  });
	
	// 条件查询
	form.on('submit(lay-search)', function(data) {
		// data.field：存放表单所有数据
		table.reload('lay-table', {
    		where: data.field
    	});
	});
	
	// 表格行的工具栏
    table.on('tool(lay-table)', function(obj) {
        var data = obj.data;
        if(obj.event === 'del') {        	
            layer.confirm('您确定要删除行吗？', function(index) {
            	// jquery的ajax， $.getJSON(), $.post(), $.ajax()
            	$.ajax({
            		type: 'post',
    				url: '${path}/action/student/del',
    				data: {
    					id: data.id
    				},
    				success: function(json) {
    					table.reload('lay-table');
              			layer.msg('删除成功！');	
    				}        				
    			});
            })
        } else if(obj.event === 'edit') {
        	layer.open({
          		type: 2,  //打开一个iframe
          		title: '编辑班级',
          		content: '${path}/action/student/get?id=' + data.id,
          		maxmin: true,
          		area: ['550px', '400px'],
          		btn: ['确定', '取消'],
          		yes: function(index, layero){
            		//点击确认触发 iframe 内容中的按钮提交
            		var submit = layero.find('iframe').contents().find("#lay-form-submit");
            		submit.click();
          		}
        	}); 
        }
    });
	
  	//监听排序事件 
    table.on('sort(lay-table)', function(obj) {
    	table.reload('lay-table', {
    		initSort: obj,
    		where: {
    			orderBy: obj.field,
    			orderDir: obj.type
    		}  		
    	});
    });
	
 	// toolbar工具栏
	var active = {
  		batchdel: function() {
    		var checkData = table.checkStatus('lay-table').data; //得到选中的数据
    		if(checkData.length === 0) {
    			layer.msg('请选择数据');
      			return false;
    		}
    			
    		var idArr = [];
    		for(var i=0; i<checkData.length; i++) {
    			idArr.push(checkData[i].id);
    		}
    		layer.confirm('确定删除吗？', function(index) {
    			$.ajax({
    				type: 'post',
    				url: '${path}/action/student/multiDel',
    				data: {
    					ids: idArr.join(',')
    				},
    				success: function(json) {
    					table.reload('lay-table');
              			layer.msg('已删除');	
    				}        				
    			});          			
    		});
  		},
      	add: function() {
        	var win = layer.open({
          		type: 2,
          		title: '增加学生',
          		content: '${path}/pages/student_form.jsp',
          		maxmin: true,
          		area: ['550px', '400px'],
          		btn: ['确定', '取消'],
          		yes: function(index, layero){
            		//点击确认触发 iframe 内容中的按钮提交
            		var submit = layero.find('iframe').contents().find("#lay-form-submit");
            		submit.click();
          		}
        	}); 
        	// layer.full(win);
  		}
 	};
	
    $('.toolbar').on('click', function(){
  		var type = $(this).data('type');
  		active[type] ? active[type]() : '';  		
	});
    
    // 加载班级列表，动态加载下拉框
    $.post('${path}/action/clazz/ajax', function(ret) {
		var elm = document.getElementById('clazzId');
		elm.options.length = 1; // 只保留
    	for(var i=0; i<ret.length; i++) {
    		var opt = new Option(ret[i].name, ret[i].id);
    		elm.options.add(opt);
    	}
    	form.render('select'); //必须的
    });
		
});

</script>

</body>
</html>